<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
    router.back()
}
</script>
<template>
    <div class="top-info">
        <div class="icon" @click="goBack">
            <img class="img" src="../../assets/img/ico_back_blue.png" alt="" srcset="">
        </div>
        <div class="title">
            <slot></slot>
        </div>
        <div class="user">
            <img class="site" src="../../assets/img/ico_ico_home_site.png" alt="" srcset="">
        </div>
    </div>
</template>
<style lang="less">
@import url(../../assets/css/base.less);

.top-info{
    width: 10rem;
    height: 1.1733rem;
    background-image: url(../../assets/img/img_info_bar_sitebg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    .icon{
        width: .8rem;
        display: flex;
        align-items: center; 
        margin-left: .4rem;
        .img{
            display: block;
            width: .2667rem;
        }
    }
    .user{
        width: .8rem;
        display: flex;
        align-items: center; 
        .site{
            display: block;
            width: .8rem;
            height: .8rem;
        }
        margin-right: .4rem;
    }
    .title{
        flex: 1;
        line-height: 1.1733rem;
        text-align: center;
        font-size: .48rem;
        color: @heading-color;
    }
}
</style>